import React, { Component } from 'react'
import { connect } from 'react-redux'
import { push } from 'connected-react-router'
import { Table, Image } from 'semantic-ui-react'

const AvatarView = ({
  src, url, text, linkAction, ...others
}) => (
  <React.Fragment>
    <Table.Cell
      className="avatar"
      collapsing
      {...others}
      onClick={() => {
        if (url) linkAction(url)
      }}
    >
      <Image src={src} rounded size="mini" />
    </Table.Cell>
    <Table.Cell className="avatar">{text}</Table.Cell>
  </React.Fragment>
)

const mapDispatchToProps = {
  linkAction: path => push(path),
}

export default connect(
  null,
  mapDispatchToProps,
)(AvatarView)
